import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    Image,
    Animated, PanResponder, UIManager, findNodeHandle,
} from 'react-native';
import { getPixel } from '../common/utils'
import { FlatList } from 'react-native-gesture-handler';
import { Actions } from "react-native-router-flux";
import { observer, inject } from 'mobx-react';



@inject('store')
@observer
export default class App extends Component {

    pan7 = PanResponder.create({
        onMoveShouldSetPanResponder: (evt, gestureState) => {
            if (Math.abs(gestureState.dx) >= 1 && Math.abs(gestureState.dy) <= 3) {
                return true
            }
            return false
        },
        onPanResponderTerminate: (evt, gestureState) => {
            // 不切换
            // 还原
            Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                    toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                    duration: 0,              // 让动画持续一段时间
                    useNativeDriver: true
                }
            ).start();
            Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                    toValue: 0,                   // 透明度最终变为1，即完全不透明
                    duration: 300,              // 让动画持续一段时间
                    useNativeDriver: true
                }
            ).start();
            if (this.state.whichBox == 1) {
                this._moveBox.setNativeProps({
                    style: { height: this.state.firstHeight }
                })
            } else if (this.state.whichBox == 2) {
                this._moveBox.setNativeProps({
                    style: { height: this.state.secHeight }
                })
            } else {
                this._moveBox.setNativeProps({
                    style: { height: this.state.zeroHeight }
                })
            }
        },
        onPanResponderMove: (evt, gestureState) => {
            let temp1 = 0
            let temp2 = 0
            if (gestureState.dx > 0) {
                temp1 = gestureState.dx >= 100 ? 100 : gestureState.dx
            } else {
                temp2 = gestureState.dx <= -100 ? -100 : gestureState.dx
            }
            // 1板子在中间
            if (this.state.whichBox == 1) {
                if (gestureState.dx < 0) {
                    // 左滑
                    this._detailPlot1.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot2.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._moveBox.setNativeProps({
                        style: { height: temp2 / 100 * (this.state.firstHeight - this.state.secHeight) + this.state.firstHeight }
                    })
                } else {
                    // 右滑
                    this._detailPlot1.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot0.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._moveBox.setNativeProps({
                        style: { height: -temp1 / 100 * (this.state.firstHeight - this.state.zeroHeight) + this.state.firstHeight }
                    })
                }
            } else if (this.state.whichBox == 2) {
                // 第二个板子在中间
                if (gestureState.dx < 0) {
                    // 左滑
                    this._detailPlot2.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot0.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._moveBox.setNativeProps({
                        style: { height: temp2 / 100 * (this.state.secHeight - this.state.zeroHeight) + this.state.secHeight }
                    })
                } else {
                    // 右滑
                    this._detailPlot2.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot1.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._moveBox.setNativeProps({
                        style: { height: -temp1 / 100 * (this.state.secHeight - this.state.firstHeight) + this.state.secHeight }
                    })
                }
            } else {
                // 第0个板子在中间
                if (gestureState.dx < 0) {
                    // 左滑
                    this._detailPlot0.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot1.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._moveBox.setNativeProps({
                        style: { height: temp2 / 100 * (this.state.zeroHeight - this.state.firstHeight) + this.state.zeroHeight }
                    })
                } else {
                    // 右滑
                    this._detailPlot0.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot2.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._moveBox.setNativeProps({
                        style: { height: -temp1 / 100 * (this.state.zeroHeight - this.state.secHeight) + this.state.zeroHeight }
                    })
                }
            }
        },
        onPanResponderRelease: (evt, gestureState) => {
            if (gestureState.dx >= 100 || gestureState.dx <= -100) {
                // 确认切换
                if (gestureState.dx < 0) {
                    // 往左滑
                    if (this.state.whichBox == 1) {
                        // 第一个板子 
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: -this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true
                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: 0,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                this.setState({ zeroIndex: (this.state.index + 2) % this.state.detailPlotNumber, whichBox: 2, index: (this.state.index + 1) % this.state.detailPlotNumber, answersIndex: (this.state.index + 1) % this.state.detailPlotNumber })
                                this._detailPlot0.setNativeProps({
                                    style: { left: this.state.width }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: -this.state.width }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: 0 }
                                })
                            });

                        });

                        this._moveBox.setNativeProps({
                            style: { height: this.state.secHeight }
                        })

                    } else if (this.state.whichBox == 2) {
                        // 第二个板子
                        this._moveBox.setNativeProps({
                            style: { height: this.state.zeroHeight }
                        })
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: -this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true

                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: 0,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                this.setState({ firstIndex: (this.state.index + 2) % this.state.detailPlotNumber, whichBox: 0, index: (this.state.index + 1) % this.state.detailPlotNumber, answersIndex: (this.state.index + 1) % this.state.detailPlotNumber })
                                this._detailPlot0.setNativeProps({
                                    style: { left: 0, translateX: 0 }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: this.state.width }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: -this.state.width }
                                })
                            });

                        });
                    } else {
                        // 第0个板子         
                        this._moveBox.setNativeProps({
                            style: { height: this.state.firstHeight }
                        })
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: -this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true
                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                this.setState({ secIndex: (this.state.index + 2) % this.state.detailPlotNumber, whichBox: 1, index: (this.state.index + 1) % this.state.detailPlotNumber, answersIndex: (this.state.index + 1) % this.state.detailPlotNumber })

                                this._detailPlot0.setNativeProps({
                                    style: { left: -this.state.width, translateX: 0 }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: 0, translateX: 0 }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: this.state.width, translateX: 0 }
                                })
                            });

                        });

                    }
                } else {
                    // 往右滑
                    if (this.state.whichBox == 1) {
                        // 第一个板子
                        this._moveBox.setNativeProps({
                            style: { height: this.state.zeroHeight }
                        })
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true

                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                this.setState({ secIndex: ((this.state.index - 2) + this.state.detailPlotNumber) % this.state.detailPlotNumber, whichBox: 0, index: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber, answersIndex: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber })

                                this._detailPlot0.setNativeProps({
                                    style: { left: 0, translateX: 0 }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: this.state.width, translateX: 0 }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: -this.state.width, translateX: 0 }
                                })
                            });
                        });


                    } else if (this.state.whichBox == 2) {
                        // 第二个板子
                        this._moveBox.setNativeProps({
                            style: { height: this.state.firstHeight }
                        })
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true

                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                this.setState({ zeroIndex: ((this.state.index - 2) + this.state.detailPlotNumber) % this.state.detailPlotNumber, whichBox: 1, index: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber, answersIndex: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber })

                                this._detailPlot0.setNativeProps({
                                    style: { left: -this.state.width, translateX: 0 }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: 0, translateX: 0 }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: this.state.width, translateX: 0 }
                                })
                            });
                        });
                    } else {
                        // 第0个板子
                        this._moveBox.setNativeProps({
                            style: { height: this.state.secHeight }
                        })
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true
                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                this.setState({ firstIndex: ((this.state.index - 2) + this.state.detailPlotNumber) % this.state.detailPlotNumber, whichBox: 2, index: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber, answersIndex: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber })

                                this._detailPlot0.setNativeProps({
                                    style: { left: this.state.width, translateX: 0 }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: -this.state.width, translateX: 0 }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: 0, translateX: 0 }
                                })
                            });
                        });
                    }
                }
            } else {
                // 不切换
                // 还原
                Animated.timing(                  // 随时间变化而执行动画
                    this.state.detailAnim,            // 动画中的变量值
                    {
                        toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                        duration: 0,              // 让动画持续一段时间
                        useNativeDriver: true
                    }
                ).start(() => {
                    Animated.timing(                  // 随时间变化而执行动画
                        this.state.detailAnim,            // 动画中的变量值
                        {
                            toValue: 0,                   // 透明度最终变为1，即完全不透明
                            duration: 300,              // 让动画持续一段时间
                            useNativeDriver: true
                        }
                    ).start();
                });

                if (this.state.whichBox == 1) {
                    this._moveBox.setNativeProps({
                        style: { height: this.state.firstHeight }
                    })
                } else if (this.state.whichBox == 2) {
                    this._moveBox.setNativeProps({
                        style: { height: this.state.secHeight }
                    })
                } else {
                    this._moveBox.setNativeProps({
                        style: { height: this.state.zeroHeight }
                    })
                }
            }
        }
    })

    state = {
        width: Dimensions.get('window').width-8,
        answers: [
            // [
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第一步的核思', step: '这是第一步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第一步的核思', step: '这是第一步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第一步的核思', step: '这是第一步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第一步的核思', step: '这是第一步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第一步的核思', step: '这是第一步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第一步的核思', step: '这是第一步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第一步的核思', step: '这是第一步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第一步的核思', step: '这是第一步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第一步的核思', step: '这是第一步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第一步的核思', step: '这是第一步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第一步的核思', step: '这是第一步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第一步的核思', step: '这是第一步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第一步的核思', step: '这是第一步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第一步的核思', step: '这是第一步步骤' }]
            //     },


            // ],
            // [
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第二步的核思', step: '这是第二步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第二步的核思', step: '这是第二步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第二步的核思', step: '这是第二步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第二步的核思', step: '这是第二步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第二步的核思', step: '这是第二步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第二步的核思', step: '这是第二步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第二步的核思', step: '这是第二步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第二步的核思', step: '这是第二步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第二步的核思', step: '这是第二步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第二步的核思', step: '这是第二步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第二步的核思', step: '这是第二步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第二步的核思', step: '这是第二步步骤' }]
            //     },
            // ],
            // [
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第三步的核思', step: '这是第三步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第三步的核思', step: '这是第三步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第三步的核思', step: '这是第三步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第三步的核思', step: '这是第三步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第三步的核思', step: '这是第三步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第三步的核思', step: '这是第三步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第三步的核思', step: '这是第三步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第三步的核思', step: '这是第三步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第三步的核思', step: '这是第三步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第三步的核思', step: '这是第三步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第三步的核思', step: '这是第三步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第三步的核思', step: '这是第三步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第三步的核思', step: '这是第三步步骤' }]
            //     },
            //     {
            //         id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
            //         contents: [{ core: '这是第三步的核思', step: '这是第三步步骤' }]
            //     },

            // ],
        ],
        praised: [
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
        ],
        questions: [
            { id: 32134232323, contents: '没加载' },
            { id: 321342323543, contents: '没加载' },
            { id: 321342332323, contents: '没加载' },
        ],

        detailPlotNumber: 3,
        // 回答板块的index
        answersIndex: 0,

        // 集数 从0开始
        index: 0,
        whichBox: 1,
        // 三个班子对应的高度
        zeroHeight: 0,
        firstHeight: 0,
        secHeight: 0,
        // 剧情板子对应的index
        zeroIndex: 2,
        firstIndex: 0,
        secIndex: 1,

        // 动画参数
        detailAnim: new Animated.Value(0),

        // 第一个剧情板子第一次设置moveBox高度
        isFirstRefresh: false
    }


    shouldComponentUpdate(nextProps, nextState) {
        if (this.state.questions !== nextState.questions) {
            return true
        }
        if (this.state.answersIndex !== nextState.answersIndex) {
            return true
        }
        if (this.state.answers !== nextState.answers) {
            return true
        }
        if (this.state.praised !== nextState.praised) {
            return true
        }
        if (this.state.zeroIndex !== nextState.zeroIndex) {
            return true
        }
        if (this.state.firstIndex !== nextState.firstIndex) {
            return true
        }
        if (this.state.secIndex !== nextState.secIndex) {
            return true
        }
        return false;
    }

    componentWillMount = () => {
        fetch(`${this.props.store.ip}/getQuestions?question=${this.props.question}`)
            // 将数据转化成为json格式 反序列化
            .then((response) => response.json())
            .then((respenseJson) => {
                var question = []
                var answers = []
                respenseJson.forEach((item, index) => {
                    question.push(item.question)
                    item.answers.forEach((item, index) => {
                        item.contents = JSON.parse(item.contents)
                    })
                    answers.push(item.answers)
                })
                var len1 = 3 - question.length
                var len2 = 3 - answers.length
                var len = respenseJson.length < 3 ? 3 : respenseJson.length
                for (let index = 0; index < len1; index++) {
                    question.push({ id: 32134232323, contents: '房间都是公司的分隔符就不能算的戈壁上的飞机哦跟你讲哦双方都能够士大夫弄的发送交给你' })
                }
                for (let index = 0; index < len2; index++) {
                    answers.push(
                        [{
                            id: 12324244, name: '曹家富', imgUrl: '', userId: '3023704769', school: '湖南科技大学', class: '软件工程一班', praiseNumber: 0, commentNumber: 0,
                            contents: [{ core: '这是第三步的核思', step: '这是第三步步骤' }]
                        }]
                    )
                }

                this.setState({ questions: question, answers: answers, detailPlotNumber: len, zeroIndex: len - 1, isFirstRefresh: true })
            })
            .catch((error) => {
                console.error(error);
            });
    }

    render() {

        return (
            <View style={{ flex: 1, alignItems: 'center', flexDirection: 'column', width: '100%', position: 'relative', paddingTop: getPixel(10) }}>

                <Animated.View key='detailSwiper' {...this.pan7.panHandlers} style={{ width: '100%' }}>
                    <Animated.View ref={ref => this._moveBox = ref} style={{ width: '100%', position: 'relative' }}>

                        {/* 剧情第0个板子 */}
                        <Animated.View ref={ref => this._detailPlot0 = ref} style={{ paddingHorizontal: getPixel(10), borderRadius: 6, translateX: this.state.detailAnim, paddingVertical: 10, width: '100%', backgroundColor: '#FFD39B', position: 'absolute', left: -this.state.width }} onLayout={() => {
                            let handle0 = findNodeHandle(this._detailPlot0);
                            UIManager.measure(handle0, (x, y, width, height, pageX, pageY) => {
                                this.setState({ zeroHeight: height })
                            })
                        }} >
                            <Text style={{ fontSize: 16 }}>{this.state.questions[this.state.zeroIndex].contents}</Text>
                        </Animated.View>

                        {/* 剧情第一个板子 */}
                        <Animated.View ref={ref => this._detailPlot1 = ref} style={{ paddingHorizontal: getPixel(10), borderRadius: 6, translateX: this.state.detailAnim, paddingVertical: 10, width: '100%', backgroundColor: '#FFD39B', left: 0 }} onLayout={() => {
                            let handle = findNodeHandle(this._detailPlot1);
                            UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
                                if (this.state.isFirstRefresh) {
                                    this._moveBox.setNativeProps({
                                        style: { height: height }
                                    })
                                    this._detailPlot1.setNativeProps({ style: { position: 'absolute' } })
                                    this.setState({ isFirstRefresh: false, firstHeight: height })
                                } else {
                                    this.setState({ firstHeight: height })
                                }
                            })
                        }} >
                            <Text style={{ fontSize: 16 }}>{this.state.questions[this.state.firstIndex].contents}</Text>
                        </Animated.View>

                        {/* 剧情第二个板子 */}
                        <Animated.View ref={ref => this._detailPlot2 = ref} style={{ paddingHorizontal: getPixel(10), borderRadius: 6, translateX: this.state.detailAnim, paddingVertical: 10, width: '100%', backgroundColor: '#FFD39B', position: 'absolute', left: this.state.width }} onLayout={() => {
                            let handle2 = findNodeHandle(this._detailPlot2);
                            UIManager.measure(handle2, (x, y, width, height, pageX, pageY) => {
                                this.setState({ secHeight: height })
                            })
                        }}>
                            <Text style={{ fontSize: 16 }}>{this.state.questions[this.state.secIndex].contents}</Text>
                        </Animated.View>
                    </Animated.View >

                </Animated.View>

                {/* <QuestionsSwiper detailPlotNumber={this.state.questionsNumber} detailPlots={this.state.questions} updateAnswers={this.updateAnswers} /> */}
                <FlatList
                    showsVerticalScrollIndicator={false}

                    style={{ flex: 1, width: '100%', }}

                    data={this.state.answers[this.state.answersIndex]}
                    renderItem={({ item, index }) =>
                        <View key={index} style={{ marginHorizontal: getPixel(8), flexDirection: 'column', backgroundColor: 'white', marginTop: getPixel(10), borderRadius: getPixel(8), paddingVertical: getPixel(10), paddingHorizontal: getPixel(10), shadowOffset: { width: 10, height: 10 }, shadowOpacity: 0.3, elevation: 10 }}>
                            <View style={{ alignItems: 'center', flexDirection: 'row' }}>
                                <Text style={{ color: '#333333', fontSize: getPixel(15), fontWeight: 'bold' }}>{item.name}</Text>
                                <Text style={{ color: '#333333', fontSize: getPixel(14), marginLeft: getPixel(10) }}>{item.class}</Text>
                                <Text style={{ color: '#333333', fontSize: getPixel(14), marginLeft: getPixel(10) }}>{item.school}</Text>
                            </View>
                            <TouchableOpacity style={{ marginVertical: getPixel(10) }} onPress={() => {
                                Actions.answer({ answer: item })
                            }}>
                                <Text numberOfLines={3} style={{ fontSize: getPixel(15) }}>
                                    {item.contents ? item.contents[0].core : '没找到'}
                                </Text>
                            </TouchableOpacity>
                            <View style={{ alignItems: 'center', justifyContent: 'flex-end', flexDirection: 'row' }}>
                                <TouchableOpacity onPress={() => {
                                    if (this.state.praised[index]) {
                                        this.state.answers[index].praiseNumber = this.state.answers[index].praiseNumber - 1
                                    } else {
                                        this.state.answers[index].praiseNumber = this.state.answers[index].praiseNumber + 1
                                    }
                                    this.state.praised[index] = !this.state.praised[index]
                                    this.setState({ praised: [...this.state.praised] })
                                }}>
                                    <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
                                        {this.state.praised[index] ?
                                            <Image style={{ width: getPixel(20), height: getPixel(20) }} source={require('../../assets/images/praised.png')} /> :
                                            <Image style={{ width: getPixel(20), height: getPixel(20) }} source={require('../../assets/images/praise.png')} />
                                        }
                                        <Text style={{ marginLeft: getPixel(5) }}>{item.praiseNumber}</Text>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={() => {
                                    this.setState({ praised: !this.state.praised })
                                }}>
                                    <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: getPixel(5) }}>
                                        <Image style={{ width: getPixel(20), height: getPixel(20), marginLeft: getPixel(10) }} source={require('../../assets/images/comments.png')} />
                                        <Text style={{ marginLeft: getPixel(5) }}>{item.commentNumber}</Text>
                                    </View>
                                </TouchableOpacity>

                            </View>
                        </View>
                    }
                />
                <TouchableOpacity style={{position: 'absolute', bottom: getPixel(60), right: getPixel(30)}} onPress={()=>{
                    Actions.writeAnswer({question:this.state.questions[this.state.index]})
                }}>
                    <Image style={{ width: getPixel(40), height: getPixel(40),  }} source={require('../../assets/images/addAnswer.png')}></Image>
                </TouchableOpacity>

            </View >
        );
    }
}

const styles = StyleSheet.create({
    text: {
        marginLeft: 15,
        padding: 5,
        fontSize: 20,
    }
})
